import React, { useState } from 'react';
import { Layout, Menu, Breadcrumb, Card, Row, Col, Statistic, Table, Button, Modal, Form, Input, InputNumber, message, Dropdown } from 'antd';
import { UserOutlined, MedicineBoxOutlined, BarChartOutlined, ShoppingCartOutlined, PlusOutlined, DownOutlined, FileTextOutlined, ContactsOutlined, NotificationOutlined } from '@ant-design/icons';
import { useNavigate, Outlet } from 'react-router-dom';

const { Header, Content, Footer, Sider } = Layout;

const Home = () => {
  const [medicines, setMedicines] = useState([
    { id: 1, name: '阿莫西林胶囊', category: '抗生素类', sales: 120, revenue: 2400 },
    { id: 2, name: '布洛芬片', category: '解热镇痛类', sales: 98, revenue: 1960 },
    { id: 3, name: '奥美拉唑', category: '消化系统类', sales: 85, revenue: 3400 },
    { id: 4, name: '维生素C片', category: '维生素类', sales: 150, revenue: 1500 },
  ]);
  
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [form] = Form.useForm();
  const navigate = useNavigate();

  // 表格列定义
  const columns = [
    {
      title: '药品名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '分类',
      dataIndex: 'category',
      key: 'category',
    },
    {
      title: '销量',
      dataIndex: 'sales',
      key: 'sales',
    },
    {
      title: '销售额(元)',
      dataIndex: 'revenue',
      key: 'revenue',
    },
  ];

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    form.validateFields().then(values => {
      const newMedicine = {
        id: medicines.length + 1,
        ...values,
        sales: 0,
        revenue: 0
      };
      setMedicines([...medicines, newMedicine]);
      form.resetFields();
      setIsModalVisible(false);
      message.success('药品添加成功！');
    });
  };

  const handleCancel = () => {
    form.resetFields();
    setIsModalVisible(false);
  };

  // 用户菜单项
  const userMenuItems = [
    {
      key: '1',
      label: '个人信息',
    },
    {
      key: '2',
      label: '退出登录',
    },
  ];

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible>
        <div className="logo" style={{ height: '32px', margin: '16px', background: 'rgba(255, 255, 255, 0.3)' }} />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" onClick={({ key }) => {
          switch (key) {
            case '1':
              navigate('/');
              break;
            case '2':
              // 修改: 将'/medicine'更正为'/medicines'以匹配App.tsx和实际路由配置
              navigate('/medicines');
              break;
            case '3':
              navigate('/sales');
              break;
            case '4':
              navigate('/customer');
              break;
            // 添加系统设置菜单点击事件
            case '5':
              navigate('/settings');
              break;
            // 新增菜单项导航
            case '6':
              navigate('/inventory');
              break;
            case '7':
              navigate('/reports');
              break;
            case '8':
              navigate('/contacts');
              break;
            case '9':
              navigate('/notifications');
              break;
            case '10':
              navigate('/visitors');
              break;
            default:
              break;
          }
        }}>
          <Menu.Item key="1" icon={<BarChartOutlined />}>
            概述
          </Menu.Item>
          <Menu.Item key="6" icon={<MedicineBoxOutlined />}>
            库存
          </Menu.Item>
          <Menu.Item key="7" icon={<FileTextOutlined />}>
            报告
          </Menu.Item>
          <Menu.Item key="5" icon={<UserOutlined />}>
            配置
          </Menu.Item>
          <Menu.Item key="4" icon={<ContactsOutlined />}>
            联系人管理
          </Menu.Item>
          <Menu.Item key="8" icon={<NotificationOutlined />}>
            通知
          </Menu.Item>
          <Menu.Item key="9" icon={<UserOutlined />}>
            与访客联系
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        // 修改 Header 部分，添加标题和用户菜单
        <Header className="site-layout-background" style={{ padding: '0 24px', background: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h2 style={{ margin: 0, color: '#1890ff' }}>药店管理系统</h2>
          <Dropdown menu={{ items: userMenuItems }} trigger={['click']}>
            <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
              <UserOutlined style={{ fontSize: '18px', marginRight: 8 }} />
              <span>管理员</span>
              <DownOutlined style={{ fontSize: '12px', marginLeft: 8 }} />
            </div>
          </Dropdown>
        </Header>
        <Content style={{ margin: '16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
          </Breadcrumb>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 360, background: '#fff' }}>
            {/* 添加 Outlet 组件用于渲染子路由内容 */}
            <Outlet />
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>药店管理系统 ©2023 Created by Ant Design</Footer>
      </Layout>

      {/* 添加药品模态框 */}
      <Modal
        title="添加药品"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="name"
            label="药品名称"
            rules={[{ required: true, message: '请输入药品名称!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="category"
            label="药品分类"
            rules={[{ required: true, message: '请输入药品分类!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="price"
            label="价格(元)"
            rules={[{ required: true, message: '请输入药品价格!' }]}
          >
            <InputNumber min={0} step={0.1} style={{ width: '100%' }} />
          </Form.Item>
        </Form>
      </Modal>
    </Layout>
  );
};

export default Home;